<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<%
    String sel1 = request.getParameter("sel1");
    String sel2 = request.getParameter("sel2");

    String jhlx = java.net.URLDecoder.decode(request.getParameter("jhlx"), "utf-8");//request.getParameter("jhlx");
    String rclx = java.net.URLDecoder.decode(request.getParameter("rclx"), "utf-8");
    String pclx = java.net.URLDecoder.decode(request.getParameter("pclx"), "utf-8");
    String bfsj = java.net.URLDecoder.decode(request.getParameter("bfsj"), "utf-8");
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Example</title>

    <style type="text/css">
        #container {
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<script src="../../js/jquery.min.js"></script>
<%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<script src="../../js/joy.loader.js" modules="form,dataview"></script>
<script src="../../js/prj/main.js"></script>
<script src="code/highcharts.js"></script>
<script src="code/highcharts-more.js"></script>
<script src="code/modules/exporting.js"></script>
<script src="code/js/themes/grid-light.js"></script>

<div id="container"></div>


<script type="text/javascript">

    $().ready(function () {

        var categories = ['0-4', '5-9', '10-14', '15-19',
            '20-24', '25-29', '30-34', '35-39', '40-44',
            '45-49', '50-54', '55-59', '60-64', '65-69',
            '70-74', '75-79', '80-84', '85-89', '90-94',
            '95-99', '100 + '];

        //数据初始化
        var chart;
//        joy.postJSON("/html/ps/psquery/findPerByYear.ht", {
//            jhlx: jhlx,
//            rclx: rclx,
//            pclx: pclx,
//            bfsj: bfsj
//        }, function (resultObject) {
//            var listX = resultObject.returnX;//resultObject.returnX; //x类型 年度
//            var list1 = resultObject.return1;//resultObject.returnY; //计划类型一
//            var list2 = resultObject.return2;//resultObject.returnZ; //计划类型二
//            var list3 = resultObject.return3;//resultObject.returnY; //计划类型三
//            var list4 = resultObject.return4;//resultObject.returnZ; //计划类型四
//
////            var result=split_array(resultObject,resultObject.length/2);
//            test(listX, list1, list2,list3, list4, title, totle);
//        });


        test();

        function test() {
            chart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: '厦门市高层次人才性别-年龄金字塔'
                },
//                subtitle: {
//                    useHTML: true,
//                    text: '数据来源: <a href="http://populationpyramid.net/germany/2015/">1950 ~ 2100 年世界人口金字塔</a>'
//                },
                xAxis: [{
                    categories: categories,
                    reversed: false,
                    labels: {
                        step: 1
                    }
                }, { // mirror axis on right side
                    opposite: true,
                    reversed: false,
                    categories: categories,
                    linkedTo: 0,
                    labels: {
                        step: 1
                    }
                }],
                yAxis: {
                    title: {
                        text: null
                    },
                    labels: {
                        formatter: function () {
                            return (Math.abs(this.value) / 1000000) + 'M';
                        }
                    },
                    min: -4000000,
                    max: 4000000
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                                '人口: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                    }
                },
                series: [{
                    name: '男',
                    data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
                        -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
                        -2176300, -1329968, -836804, -354784, -90569, -28367, -3878]
                }, {
                    name: '女',
                    data: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
                        3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
                        1447162, 1005011, 330870, 130632, 21208]
                }]


            });
        }
    })


</script>
</body>
</html>
